<template>
    <div class="popups" v-if="a" >
        <div class="popups_block" >
            <img v-on:click="add(a)"   class="popups_img" src="@/assets/叉子.png" alt="">
            <!-- <div>{{nowTime}}</div> -->
            <div class="popups_left">
                <img src="@/assets/天晴.png" alt="">
            </div>
            <p class="popups_p">
                {{arr[0].ymd}}
                {{arr[0].week}}
            </p> 
            <p>  
                {{arr[0].sunrise}}
                {{arr[0].sunset}}
            
            </p>
            <p>
                {{arr[0].high}}
                {{arr[0].low}}
            </p>
            <p>
                {{arr[0].fx}}
                {{arr[0].fl}}
                {{arr[0].type}}
            </p>
        
            <p>{{arr[0].notice}}</p>
            <p>上次打开时间<br>{{asss}}</p>
        </div>
        
    </div>
</template>
<script>
import { useStore} from 'vuex'
import formatTime from "@/utils/formatTime"
export default {
    setup () {
    // 1. 使用vuex仓库
    const store = useStore()
    // 1. 使用根模块state的数据
    // console.log(store.state.username) 
    // 2.使用根模块getters的数据
    // console.log(store.getters.newName)
    // console.log(store.state.arr)
    // const agg=store.state.arr.data.data.forecast[0].high
    const mutationsFn = () => {
      // 3. 提交根模块mutations函数
      // store.commit('updateName')
      // 4.调用根模块actions函数
      store.dispatch('updateName')
    }
    
    // store.dispatch("")
    // console.log(this.data.info)
    return {
        mutationsFn
        
    }
  },
  data(){
      return{
          a:true,
          arr:this.$store.state.arr,
          asss:localStorage.getItem('agg'),
          addd:""
        //   nowTime:''
        // aggs:""
      }
  },
  mounted(){
      localStorage.setItem("agg",this.addd)
    //    this.asss=localStorage.getItem('agg');
       
        console.log(this.asss)
    //   this.asss=localStorage.getItem('agg');
    //   console.log(this.asss)
    //   console.log(this.asss)
  },
   created() {
    let b=new Date().toLocaleString();
    this.addd=b
    
  },
  methods:{
      add(){
         this.a=!this.a 
      },
      
  }
}
</script>
<style scoped>
    .popups{
        width: 100%;
        height: 100%;
        /* width: 20rem; */
        background: #e0e0e0;
        /* margin-left: -10rem; */
        position: fixed;
        top: 0rem; 
        left: 0;
        opacity: 0.95;
       /* background-image: url("../../assets/天晴.png"); */
       /* border: 1px solid #c0c0c0;
       border-radius: 15px; */
       z-index: 100;
    }
    .popups_block{
        width: 20rem;
        height: 18rem;
        /* width: 20rem; */
        background: linear-gradient(rgb(13, 104, 188), rgb(54, 131, 195)) rgba(255,0,0,0.1);
        margin-left: -13rem;
        margin-top: -10rem;
        position: fixed;
        top: 50%; 
        left: 50%;
       border: 1px solid #c0c0c0;
       border-radius: 15px;
    }
    .popups_img{
        width: 2rem;
        height: 2rem;
        float: right;
    }
    .popups_p{
        margin-top: 3rem;
    }
    .popups_left{
        display: inline-block;
        position: fixed;
        left: 5rem;
        top: 10rem;
        /* width: 100%; */
    }
    .popups_left img{
        width: 3rem;
    }
</style>